import { 
    Scatter, 
    ScatterConfig,
} from '@ant-design/charts';
import { useState, useEffect } from 'react';
import * as apiType from './data';
import * as api from './api';

export default function () {

    const [data, setData] = useState<apiType.IScatterData[]>([]);

    useEffect(() => {
        (async () => {
            const d = await api.getScatterData();
            setData(d);
        })();
    }, []);

    const scatterProps: ScatterConfig = {
        data,
        xField: 'x',
        yField: 'y',
        colorField: 'genre',
        shape: 'diamond' 
    };

    return <Scatter { ...scatterProps } />;
}
